<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>opencv实例使用+doomdepth背包rune识别+数量识别</title>
    <!-- <script src='https://docs.opencv.org/4.8.0/opencv.js' onload="openCvReady()" type="text/javascript"></script> -->
    <!-- OpenCV.js 4.5.5 版本 -->
    <!-- <script src='https://docs.opencv.org/4.5.5/opencv.js'></script> -->

    <!-- <script src='./opencv_4.5.5.js' type="module"></script> -->

    <!-- You may want to load opencv.js asynchronously by async attribute in <script> tag. To be notified when opencv.js is ready, you can register a callback to onload attribute. -->
    <script async src="./opencv_4.5.5.js" onload="openCvReady()" type="text/javascript"></script>
    <link rel="stylesheet" href="./5_runeTool.css">
    <!-- <script async src="./opencv_4.8.0.js" onload="openCvReady()" type="text/javascript"></script> -->



</head>

<body>
    <!-- <script type="module">
        import * as cv from './opencv_4.5.5.js';
        console.log(cv);
    </script> -->

    <!-- 表格最终展示结果 -->
    <div class="table_wrapper">
        <table id="result_table">
            <thead>
                <tr>
                    <td class="order">序号</td>
                    <td class="rune_name">符石名称</td>
                    <td class="rune_img">符石模板</td>
                    <td class="canvas1">符石匹配结果</td>
                    <td class="canvas2">数量匹配结果</td>
                    <td class="num">数量</td>
                    <td class="canvas2_t">数量匹配测试用</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <!-- ./icon.png -->
    <!-- <canvas id="templateCanvasInput" width="70" height="70"></canvas> -->
    <!-- ./icon_l.png -->
    <!-- <canvas id="templateCanvasInput" width="140" height="140"></canvas> -->
    <!-- ./icon_gold.png -->
    <!-- <canvas id="templateCanvasInput" width="100" height="60"></canvas> -->
    <!-- ./icon_gold_l.png -->
    <!-- <canvas id="templateCanvasInput" width="150" height="90"></canvas> -->
    <!-- ./runes/rune_1_SIL.jpg -->
    <!-- 展示Rune模板图片 (表格数据展示，可隐藏) -->
    <canvas style="display: none;" id="templateCanvasInput" width="80" height="80"></canvas>

    <!-- 展示Rune区域并标记num区域 (表格数据展示，可隐藏) -->
    <canvas style="display: none;" id="rune_num_marked_Canvas" width="150" height="150"></canvas>

    <!-- ./nums/num_1.jpg -->
    <!-- <canvas id="templateCanvasInput" width="40" height="40"></canvas> -->
    <!-- ./nums/num_1.jpg -->
    <!-- 展示数字模板图片 (表格数据展示，可隐藏) -->
    <canvas style="display: none;" id="templateNumCanvasInput" width="40" height="40"></canvas>


    <!-- 展示数字区域 (表格数据展示，可隐藏) -->
    <canvas style="display: none;" id="numCanvas" width="40" height="40"></canvas>


    <!-- 展示背包区域并标记Rune区域 -->
    <canvas id="bag_rune_marked_Canvas" width="1000" height="800"></canvas>
    <!-- <canvas id="bag_rune_marked_Canvas" width="1106" height="914"></canvas> -->


    <!-- ./icons.png -->
    <!-- <canvas id="imageCanvasInput" width="400" height="400"></canvas>
    <canvas id="screenshot_bag_marked_Canvas" width="400" height="400"></canvas> -->

    <!-- screenshot1 -->
    <!-- 截图数据原图不显示 -->
    <canvas style="display: none;" id="imageCanvasInput" width="1080" height="2400"></canvas>
    <!-- screenshot2 -->
    <!-- <canvas style="display: none;" id="imageCanvasInput" width="1240" height="2772"></canvas> -->
    <!-- 展示截图数据并标记出背包区域 -->
    <canvas id="screenshot_bag_marked_Canvas" width="1080" height="2400"></canvas>
    <!-- <canvas id="screenshot_bag_marked_Canvas" width="1240" height="2772"></canvas> -->

    <!-- <hr /> -->

    <!-- ./bag_border.png -->
    <!-- 背包模板图片 不显示 -->
    <canvas style="display: none;" id="templateBagCanvasInput" width="962" height="795"></canvas>

    <!-- 所有数字模板图片 不显示 -->
    <div id="templ_list" style="display: none;"></div>

    <!-- #7367 测量符石尺寸用，控制台调整 -->
    <div
        style="display: none;width: 133px;height: 133px;top: 2545px;left: 467px;background-color: yellow;opacity: 0.6;position: absolute;z-index: 99999;">
        <img style="width: 100%;height: 100%;" src="./runes/rune_10_KLY.png" alt="" />
    </div>
    <!-- 调节数字框颜色用 -->
    <div
        style="display: none;width: 27px;height: 26px;top: 141px;left: 630px;border: 1px solid rgb(3 255 32);/* background-color: yellow; */opacity: 1;position: absolute;z-index: 99999;">
    </div>

    <script type="text/javascript" src="./5_runeTool.js"></script>
</body>

</html>